<template>
  <div id="SceneView">
    <div id="mapView"></div>
  </div>
</template>

<script>
import InitArcGisJs from "../utils/loadGisModules";
export default {
  name: "trackMobile",
  data() {
    return {
      ARCGIS: {}, //arcgis模块
      view: {},
      peoplePointLayer: {}
    };
  },
  async created() {
    this.ARCGIS = await InitArcGisJs.init();
    let { Map, TileLayer, SceneView } = this.ARCGIS;
    const map = new Map();
    this.map = map;
    this.view = new SceneView({
      container: "mapView",
      map: this.map,
      qualityProfile: "high"
    });
    var tiledUrl =
      "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer";
    var tiledLayer = new TileLayer({ url: tiledUrl });
    this.map.add(tiledLayer);
    this.view.on("click", event => {
      var screenPoint = {
        //当前点击的经纬度
        x: event.x,
        y: event.y
      };
      this.view.graphics.removeAll();
      this.view.hitTest(screenPoint).then(response => {
        console.log(response);
        if (response.results.length > 0 && response.results[0].graphic) {
          console.log("这是当前点击的点位信息", response.results);
          //处理高亮显示
          this.handleHighlight(response.results[0].graphic.attributes);
        }
      });
    });
    this.view.when(
      () => {
        // 地图加载完成
        setTimeout(() => {
          this.view.goTo({
            // 视角切换动画
            center: [121.45897884146042, 31.246522700030482], //终点坐标
            heading: 360, // 面向正南
            z: 10000,
            tilt: 0, //视图角度cos
            zoom: 13 //放大等级
          });
          this.showPotins();
        }, 1000);
        // 撒点动态图
      },
      function(error) {
        console.error(error);
        alert("加载失败,稍后重新加载");
        window.reload();
      }
    );
  },
  mounted() {},
  methods: {
    showPotins() {
      let { FeatureLayer, Graphic, Point } = this.ARCGIS;
      let pointInfos = [{id:0,name:"是小枫枫0呀",points:[121.47664041315876,31.241658636952366],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:1,name:"是小枫枫1呀",points:[121.50120540108188,31.259572712355297],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:2,name:"是小枫枫2呀",points:[121.49224250997113,31.28723902573482],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:3,name:"是小枫枫3呀",points:[121.44069872380564,31.287754139074856],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:4,name:"是小枫枫4呀",points:[121.41434476475695,31.270839900839313],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:5,name:"是小枫枫5呀",points:[121.40119645053903,31.246254183351027],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:6,name:"是小枫枫6呀",points:[121.39227257107012,31.208383790719886],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:7,name:"是小枫枫7呀",points:[121.42639012586784,31.185898331649092],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:8,name:"是小枫枫8呀",points:[121.46884406504044,31.181813753270422],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:9,name:"是小枫枫9呀",points:[121.46588713822887,31.212321844168038],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:10,name:"是小枫枫10呀",points:[121.46553950589416,31.211133817577224],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:11,name:"是小枫枫11呀",points:[121.466233790181,31.21044085723904],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:12,name:"是小枫枫12呀",points:[121.4666965570663,31.20984694263423],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:13,name:"是小枫枫13呀",points:[121.46611768232212,31.20935208681198],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:14,name:"是小枫枫14呀",points:[121.46449733882365,31.209253164301884],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:15,name:"是小枫枫15呀",points:[121.46033111398998,31.20668036142305],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:16,name:"是小枫枫16呀",points:[121.45929009377745,31.204504011858283],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:17,name:"是小枫枫17呀",points:[121.45686150041182,31.201734907457446],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:18,name:"是小枫枫18呀",points:[121.45547394034149,31.20064726310867],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:19,name:"是小枫枫19呀",points:[121.44969209522137,31.199163988974767],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:20,name:"是小枫枫20呀",points:[121.4397433292061,31.200744235609623],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:21,name:"是小枫枫21呀",points:[121.4351190813381,31.19935920110616],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:22,name:"是小枫枫22呀",points:[121.43732731092733,31.193430896602557],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:23,name:"是小枫枫23呀",points:[121.4391725044852,31.19619753681895],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:24,name:"是小枫枫24呀",points:[121.44114186152396,31.19382686030865],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:25,name:"是小枫枫25呀",points:[121.44773426233961,31.191161278824755],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:26,name:"是小枫枫26呀",points:[121.45860011582872,31.186423765286833],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:27,name:"是小枫枫27呀",points:[121.45167216264535,31.180109459297967],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:28,name:"是小枫枫28呀",points:[121.51293239831797,31.223727815139775],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:29,name:"是小枫枫29呀",points:[121.51370792980111,31.2210552779536],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:30,name:"是小枫枫30呀",points:[121.51344019081891,31.217493024335468],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:31,name:"是小枫枫31呀",points:[121.51133781183596,31.207478769847352],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:32,name:"是小枫枫32呀",points:[121.55014707301056,31.217473934265687],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:33,name:"是小枫枫33呀",points:[121.55639733231519,31.217692353619274],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:34,name:"是小枫枫34呀",points:[121.55821252564118,31.215687276683333],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:35,name:"是小枫枫35呀",points:[121.5509154002511,31.213911430016463],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"},{id:36,name:"是小枫枫36呀",points:[121.54830753357074,31.212577629047285],url:"http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"}] ;
      // #region
      let graphics = pointInfos.map(point => {
        const {
          points: [x, y],
          ...extra
        } = point;
        return new Graphic({
          geometry: {
            type: "point",
            x,
            y,
            spatialReference: {
              wkid: 4326 //统一坐标系
            }
          },
          attributes: { ...point }
        });
      });
      this.peoplePointLayer = new FeatureLayer({
        source: graphics,
        // objectIdField: "MYPOINTOBJECTID",
        objectIdField: "id",
        fields: [
          { name: "id", alias: "id", type: "string" },
          { name: "url", alias: "url", type: "string" },
          { name: "name", alias: "name", type: "string" },
          { name: "points", alias: "points", type: "xml" }
        ],
        // 暴露出去的参数 * 代表暴露所有
        outFields: ["*"],
        // 弹窗
        // popupTemplate: {
        //   title: event => {
        //     return "枫枫不疯";
        //   },
        //   content: `
        //     <div>
        //       <img src='{url}'>
        //       <p>
        //         <a style="font-size:28px;color:red;" href="http://www.linfengya.cn/">去找{name}，走你biubiu~</a>
        //       </p>
        //     </div>
        //     `
        // },
        // 渲染方法
        renderer: {
          type: "unique-value",
          defaultSymbol: {
            // 类型有 图片标记 和 点
            type: "picture-marker",
            // 图片地址
            url: require("@/assets/images/people.png"),
            // 图片的大小
            width: "20",
            height: "20"
          }
        }
      });
      // #endregion
      this.map.add(this.peoplePointLayer);
    },
    handleHighlight(attr) {
      this.view.graphics.removeAll();
      var selectionSymbol = {
        type: "picture-marker",
        url: require("@/assets/images/people2.png"),
        width: "20",
        height: "20"
      };
      var query = this.peoplePointLayer.createQuery();
      query.where = this.peoplePointLayer.objectIdField + "=" + attr.id;
      console.log("query:", query.where);
      this.peoplePointLayer.queryFeatures(query).then(clickGcRes => {
        if (clickGcRes.features.length > 0) {
          var lightFeature = clickGcRes.features[0];
          console.log(lightFeature);
          lightFeature;
          lightFeature.geometry.z = 0;
          lightFeature.symbol = selectionSymbol;
          this.view.graphics.add(lightFeature);
        }
      });
    }
  }
};
</script>

<style>
@import "https://js.arcgis.com/4.20/esri/css/main.css";

html,
body,
#mapView {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
.dot_box {
  z-index: 2;
  position: fixed;
  width: 20px;
  height: 20px;
  background: #0080ff;
  border-radius: 50%;
}
.line_ele {
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -1px;
  height: 1px;
  border-bottom: 1px solid #0080ff;
}
.box {
  z-index: 2;
  display: none;
  position: fixed;
  width: 300px;
  height: 300px;
  border: 2px solid #ddd;
}
#SceneView {
  position: absolute;
  width: 100%;
  height: 100%;
}
.esri-component.esri-attribution.esri-widget {
  display: none;
}
</style>
